<template>
    <div class="ResultCom">
        <span v-for="(item,index) in list" v-if="index===indexVal" :key="item.id">{{item.id}}. {{item.text}}({{item.grade}}分)</span>
        <ul v-for="(item,index) in list" v-if="index===indexVal" :key="index">
            <li>
                <div>A：<input type="radio" name="result" v-model="item.keyVal" value="A" id="A"></div>
                <div>
                    <label for="A">{{item.options.A}}</label>
                </div>
            </li>
            <li>
                <div>B：<input type="radio" name="result" v-model="item.keyVal" value="B" id="B"></div>
                <div>
                    <label for="B">{{item.options.B}}</label>
                </div>
            </li>
            <li>
                <div>C：<input type="radio" name="result" v-model="item.keyVal" value="C" id="C"></div>
                <div>
                    <label for="C">{{item.options.C}}</label>
                </div>
            </li>
            <li>
                <div>D：<input type="radio" name="result" v-model="item.keyVal" value="D" id="D"></div>
                <div>
                    <label for="D">{{item.options.D}}</label>
                </div>
            </li>
        </ul>
        <div class="btn-div">
            <div class="button" @click="up">上一题</div>
            <div class="button" @click="next">下一题</div>
            <div class="button" @click="sumbit">交卷</div>
        </div>
        
    </div>
</template>

<script>
import topicList from '../json/topic.json'
    export default {
        props: {
            user: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data () {
            return {
                list: topicList,
                indexVal: 0
            }
        },
        methods: {
            up() {
                if (this.indexVal === 0) {
                    alert("已经是第一题了")
                } else {
                    this.indexVal --
                }
            },
            next() {
                if (this.indexVal === this.list.length - 1) {
                    alert("已经是最后一题了")
                } else {
                    this.indexVal ++
                }
            },
            sumbit() {
                var _state = false
                var _arrId = []
                this.list.forEach(val => {
                    if (val.keyVal === "") {
                        _state = true
                        _arrId.push(val.id)
                    }
                });
                if (_state) {
                    alert("请完成你所有的题--未完成题号为：" + _arrId)
                } else {
                    this.$emit("updateCom", "TopicCom")
                    this.$nextTick().then(() => {
                        bus.$emit("submitList", this.list)
                    })
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .ResultCom {
        padding: 25px;
        line-height: 25px;
        margin-top: 5%;
        span {
            font-size: 1.3em;
        }
        ul {
            margin-top: 12%;
        }
        li {
            margin-top: 7%;
            font-size: 1.3em;
            input {
                margin-right: 8px;
                width: 17px;
                height: 17px;
            }
            div:nth-child(1) {
                display: inline-block;
                width: 70px;
                vertical-align: top;
            }
            div:nth-child(2) {
                display: inline-block;
                width: 70%;
            }
        }
        .btn-div {
            position: absolute;
            bottom: 20%;
            left: 0;
            width: 100%;
            text-align: center;
            .button {
                width: 30%;
                height: 45px;
                line-height: 45px;
                margin-top: 30%;
            }
        }
    }
</style>